<template>
    <div class="app-container">
        <el-card>
            <el-form ref="formRef" :model="form">
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="消息类型名称">
                            <el-input v-model="form.messageTypeName" placeholder="请输入消息类型名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="是否启用">
                            <el-select v-model="form.isEnabled" placeholder="请选择是否启用">
                                <el-option label="是" :value="0"></el-option>
                                <el-option label="否" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="创建时间">
                            <el-date-picker v-model="form.createTime" @change="datetimeChange" type="datetimerange"
                                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24" style="text-align: left;">
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card style="margin-top: 20px;">
            <div class="" style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                <div>
                    <el-button type="danger" plain @click="handleBulkDelete">批量删除</el-button>
                    <el-button type="primary" plain @click="handleBulkOperation">批量操作</el-button>
                </div>
                <el-button type="primary" @click="handleCreateMessageType">新建消息类型</el-button>
            </div>
            <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%">
                <el-table-column type="selection" align="center" width="55"></el-table-column>
                <el-table-column prop="messageTypeId" label="ID" align="center" width="100"></el-table-column>
                <el-table-column prop="messageTypeName" align="center" label="消息类型名称"></el-table-column>
                <el-table-column prop="description" align="center" label="描述"></el-table-column>
                <el-table-column prop="isEnabled" align="center" label="是否启用" width="100">
                    <template #default="scope">
                        <el-switch :active-value="0" :inactive-value="1" @change="activeChange($event, scope.row)"
                            v-model="scope.row.isEnabled"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="priority" label="优先级" align="center" width="100"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" width="200"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="100">
                    <template #default="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px;">
                <el-pagination v-model:current-page="form.pageNum" v-model:page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>


    </div>
</template>

<script setup>
import { ref } from 'vue';
import { listBasicMessageTypeList, updateBasicMessageType, delBasicMessageType } from '@/api/basic/message/basicMessageType.js';

// Mock data
const form = ref({
    messageTypeName: '',
    isEnabled: '',
    startTime: '',
    endTime: '',
    createTime: '',
    pageNum: 1,
    pageSize: 10
});
const total = ref(0);
const tableData = ref([]);
const multipleSelection = ref('');

const datetimeChange = (value) => {
    form.value.startTime = value[0];
    form.value.endTime = value[1];
};
const handleSearch = () => {
    listBasicMessageTypeList(form.value).then((response) => {
        console.log(response);
        total.value = response.total;
        tableData.value = response.rows;
    })
};
const handleReset = () => {
    form.value = {
        messageTypeName: '',
        isEnabled: '',
        startTime: '',
        endTime: '',
        createTime: '',
        pageNum: 1,
        pageSize: 10
    };
};

const handleBulkDelete = () => {
    if (!multipleSelection.value) {
        return
    };
    ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        delBasicMessageType(multipleSelection.value).then((response) => {
            handleSearch();
        })
    })
};

const handleBulkOperation = () => {
    console.log('Bulk Operation');
};

const handleCreateMessageType = () => {
    console.log('Create Message Type');
};

const handleEdit = (index, row) => {
    console.log('Edit:', index, row);
};
// 批量选择
const handleSelectionChange = (val) => {
    multipleSelection.value = val.map((item) => item.messageTypeId).join(',');
}
const handleDelete = (index, row) => {
    ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        delBasicMessageType(row.messageTypeId).then((response) => {
            handleSearch();
        })
    })
};

const handleSizeChange = (size) => {
    form.value.pageSize = size;
    handleSearch();
};
const handleCurrentChange = (page) => {
    form.value.pageNum = page;
    handleSearch();
};


// 切换状态
const activeChange = (value, row) => {
    console.log(value);

    updateBasicMessageType({ messageTypeId: row.messageTypeId, isEnabled: value }).then((response) => {
        handleSearch();
    })
};

handleSearch();
</script>

<style scoped>
</style>